﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.ColumnModifyModel
@{
    ViewData["Title"] = "商城分类管理";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<div id="container">
    <form class="layui-form form-cus form-back" action="" id="app">
        <div class="panel-body">
            <div class="panel-addpic">
                <div class="text">基本属性</div>
                <div class="form-cur-wall">
                    <label>父栏目：</label>
                    <div class="layui-input-block">
                        <select id="parentId" name="parentId" lay-verify="required" lay-search="">
                            <option value="0">父级</option>
                            <option v-for="it in list" :value="it.id">{{it.title}}</option>
                        </select>
                    </div>
                </div>
                <ul class="addpic-list clearfix">
                    <li>
                        <div class="add-photo default">
                            <input class="imgv" v-model="m.imgUrl" id="ImgUrl" name="ImgUrl" type="hidden" value="">
                            <div class="select-newimg fyt-cloud" :class="m.imgUrl?'layui-hide':''" data-text="ImgUrl" data-img="imgShow" data-type="form">
                                <i class="icon-addphote"></i>
                                <span>选择图片</span>
                            </div>
                            <div class="add-photo-wall" :class="m.imgUrl?'':'layui-hide'">
                                <img id="imgShow" :src="m.imgUrl">
                                <div class="phote-edit">
                                    <a class="photo-tool fyt-cloud" data-text="ImgUrl" data-img="imgShow" data-type="form" href="javascript:void(0)"><i class="layui-icon layui-icon-edit"></i>更换</a>
                                    <a class="photo-tool last" href="javascript:void(0)" onclick="oc.deleteFile()"><i class="layui-icon layui-icon-delete"></i>删除</a>
                                </div>
                                <div class="cover">封面</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="form-cur-wall layui-clear">
                    <label style="line-height:inherit;">栏目属性：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" id="isTopShow" name="IsTopShow" lay-skin="primary" title="是否顶部显示">
                        <input type="checkbox" id="isWapShow" name="IsWapShow" lay-skin="primary" title="是否移动端显示">
                    </div>
                </div>
                <div class="text else">扩展属性</div>
                <div class="form-cur-wall">
                    <label>副标题</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="m.subTitle" name="SubTitle" value="" maxlength="50" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="form-cur-wall">
                    <label>转向连接</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="m.linkUrl" name="LinkUrl" value="" placeholder="以http开头" maxlength="100" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="m.title" name="Title" value="" maxlength="50" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类英文名称</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="m.enTitle" name="EnTitle" value="" maxlength="100" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block">
                        <textarea name="KeyWord" v-model="m.keyWord" class="layui-textarea" style="min-height: 60px;" placeholder="SEO关键字，填写利于抓取，英文逗号分隔"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类描述</label>
                    <div class="layui-input-block">
                        <textarea name="Summary" v-model="m.summary" class="layui-textarea" style="min-height: 60px;" placeholder="SEO描述，填写利于抓取，最多200个字"></textarea>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
                    <button type="button" class="layui-btn layui-btn-primary btn-open-close">返回上页</button>
                </div>
            </div>
        </div>
        <input type="hidden" v-model="m.id" value="0" />
    </form>
    <script>
        var vm = new Vue({
            el: "#app",
            data(){
                return {
                    m: {},
                    list:[]
                }
            },
            methods: {

            }
        });
        var oc, os;        
        layui.config({
            base: '/themes/js/modules/'
        }).use(['layer', 'jquery', 'common', 'form'], function () {
            var form = layui.form, $ = layui.jquery;
            os = layui.common;
            vm.m.id = os.getUrlParam('id');
            var pid = os.getUrlParam('pid');
            form.render();
            $('.panel-addpic').css({ 'min-height': $(window).height() - 95 });

            os.cloudFile();
            oc = {
                fileSave(v) {
                    $(".select-newimg").addClass('layui-hide');
                    $(".add-photo-wall").removeClass('layui-hide');                    
                    $('#ImgUrl').val(v);
                    $('#imgShow').attr('src', v);
                    vm.m.imgUrl = v;
                },
                deleteFile() {
                    $(".select-newimg").removeClass('layui-hide');
                    $(".add-photo-wall").addClass('layui-hide');
                    $('#ImgUrl').val('');
                    $('#imgShow').attr('src', v);
                    vm.m.imgUrl = '';
                },
                init() {
                    os.ajax('api/shop/column/getmodel', { id: vm.m.id }, function (res) {
                        if (res.statusCode === 200) {
                            vm.m = res.data.model;
                            vm.list = res.data.list;
                            vm.$nextTick(function () {
                                if (vm.m.id === 0 && pid !== 0) {
                                    $("#parentId").val(pid);
                                } else {
                                    $("#parentId").val(vm.m.parentId);
                                }
                                if (vm.m.isTopShow) {
                                    $("#isTopShow").prop("checked", true);
                                }
                                if (vm.m.isWapShow) {
                                    $("#isWapShow").prop("checked", true);
                                }
                                form.render();
                            });
                        } else {
                            os.error(res.message);
                        }
                    });
                }
            };
            oc.init();
            //监听提交
            form.on('submit(submit)', function (data) {
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                
                var urls = "api/shop/column/add";
                if (vm.m.id!==0) {
                    urls = "api/shop/column/update";
                }
                vm.m.parentId = data.field.parentId;
                vm.m.isTopShow = data.field.IsTopShow === 'on' ? true : false;
                vm.m.isWapShow = data.field.IsWapShow === 'on' ? true : false;
                //console.log(vm.m); return false;
                os.ajax(urls, vm.m, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode === 200) {
                        var $$ = parent.layui.jquery;
                        $$("#isSave").val('1');
                        os.success('保存成功~');
                        setTimeout(function () {
                            parent.active.closeCloumnModify();
                        }, 500);
                    }
                    else {
                        os.error(res.message);
                    }
                });
                //return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.active.closeCloumnModify();
            });
        });
    </script>
</div>